<template>
  <v-app>
    <v-app-bar app elevation="4" color="white">
      <v-container class="py-0 fill-height">
        <a id="url-home" class="text-h5 mx-6" @click="gotoHome"
          ><span class="blue--text">果壳</span>小镇</a
        >
        <v-breadcrumbs :items="items" large class="grey--text"></v-breadcrumbs>
        <v-spacer></v-spacer>
        <!-- 搜索框 -->
        <v-responsive max-width="260">
          <v-text-field
            dense
            flat
            hide-details
            placeholder="搜索感兴趣的内容"
            filled
            rounded
            append-icon="mdi-magnify"
            v-model="searchTerm"
            @keypress="search"
          >
          </v-text-field>
        </v-responsive>
        <!-- 登录之后显示为头像+下拉框 -->
        <div v-if="authenticated" class="text-center ml-5">
          <v-menu open-on-click offset-y min-width="100" class="pa-0 ma-0">
            <template v-slot:activator="{ on, attrs }">
              <v-btn v-bind="attrs" v-on="on" text fab>
                <v-avatar class="ma-2" size="43">
                  <img :src="user.avatar" />
                </v-avatar>
              </v-btn>
            </template>
            <v-list>
              <v-list-item class="ma-0 pa-0" dense>
                <v-btn class="ma-0" text @click="goto_profile"
                  ><v-icon left> mdi-account-circle </v-icon>个人信息</v-btn
                >
              </v-list-item>
              <v-list-item class="ma-0 pa-0" dense>
                <v-btn class="ma-0" text @click="goto_setting"
                  ><v-icon left> mdi-cog </v-icon>设置
                </v-btn>
              </v-list-item>
              <v-list-item class="ma-0 pa-0" dense>
                <v-btn class="ma-0" text @click="user_logout"
                  ><v-icon left> mdi-power </v-icon>退出
                </v-btn>
              </v-list-item>
            </v-list>
          </v-menu>
        </div>
        <!-- 未登录显示登录和注册 -->
        <div v-else>
          <v-btn class="ml-7" color="blue" text outlined @click="gotoAuth"
            >登录</v-btn
          >
        </div>
      </v-container>
    </v-app-bar>

    <v-main>
      <v-container>
        <v-row justify="center">
          <v-col>
            <v-sheet class="mt-3" rounded="lg" elevation="4">
              <!-- 不同url页面的显示区域 -->
              <router-view :activities="activities"></router-view>
            </v-sheet>
          </v-col>
          <!-- 这部分用来筛选活动和创建活动 -->
          <v-col cols="2">
            <v-sheet class="px-3 py-1 mt-3" rounded="lg" elevation="4">
              <!-- 创建活动 -->
              <v-btn
                class="white--text font-weight-bold my-2"
                @click="goto_create"
                color="blue"
                block
                >创建活动</v-btn
              >
              <!-- 全部 -->
              <v-btn
                class="white--text font-weight-bold my-2"
                color="blue"
                text
                @click="showAllActivities"
              >
                <v-icon left> mdi-format-list-bulleted </v-icon>全部
              </v-btn>
              <!-- 运动 -->
              <v-btn
                class="white--text font-weight-bold my-2"
                color="green"
                text
                @click="showActivities('运动')"
              >
                <v-icon left> mdi-basketball </v-icon>运动
              </v-btn>
              <!-- 出行 -->
              <v-btn
                class="white--text font-weight-bold my-2"
                color="orange"
                text
                @click="showActivities('出行')"
              >
                <v-icon left> mdi-taxi </v-icon>出行
              </v-btn>
              <!-- 最火 -->
              <v-btn
                class="white--text font-weight-bold my-2"
                color="red"
                text
                @click="showPopularActivities"
              >
                <v-icon left> mdi-fire </v-icon>最火
              </v-btn>
              <!-- 其他 -->
              <v-btn
                class="white--text font-weight-bold my-2"
                color="grey"
                text
                @click="showOtherActivities"
              >
                <v-icon left> mdi-apps </v-icon>其他
              </v-btn>
              <!-- 与我相关 -->
              <v-btn
                v-if="user"
                class="white--text font-weight-bold my-2"
                color="blue"
                text
                @click="myActivities"
              >
                <v-icon left> mdi-account-circle </v-icon>与我相关
              </v-btn>
            </v-sheet>
          </v-col>
        </v-row>
      </v-container>
    </v-main>

    <v-footer color="light-blue darken-4" padless>
      <v-row justify="center" no-gutters>
        <v-col class="py-4 text-center white--text" cols="12">
          Copyright© 2021—2022 <strong>高级软件工程【软工小队】</strong>
        </v-col>
      </v-row>
    </v-footer>
  </v-app>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import axios from "axios";

export default {
  data() {
    return {
      searchTerm: "",
      activities: null,
      items: [
        {
          text: "活动月报【还没做】",
          href: "#",
        },
        {
          text: "活动达人【还没做】",
          href: "#",
        },
      ],
    };
  },
  computed: {
    ...mapGetters({ user: "stateUser", authenticated: "isAuthenticated" }),
  },
  methods: {
    ...mapActions(["logout"]),
    // 转到主页
    gotoHome() {
      let path = "/";
      if (this.$route.path !== path) {
        this.$router.push(path);
      }
    },
    // 退出登录
    user_logout() {
      this.logout();
      if (this.$route.path !== "/") {
        this.$router.push("/");
      }
    },
    // 转到登录页
    gotoAuth() {
      let path = "/auth";
      if (this.$route.path !== path) {
        this.$router.push(path);
      }
    },
    // 转到设置页面
    goto_setting() {
      if (this.$route.path !== "/setting") {
        this.$router.push("/setting");
      }
    },
    // 转到个人信息页面
    goto_profile() {
      let path = "/users/" + this.user.username;
      if (this.$route.path !== path) {
        this.$router.push(path);
      }
    },
    // 转到创建活动页面
    goto_create() {
      let path = "/create";
      if (this.user && this.$route.path !== path) {
        this.$router.push(path);
      } else {
        this.$router.push("/auth");
      }
    },
    // 搜索
    async search(e) {
      if (this.searchTerm === "") return;
      if (e.which === 13) {
        await axios
          .post("/activities/search", { search: this.searchTerm })
          .then((res) => {
            if (res.data.activities.length > 0)
              this.activities = res.data.activities;
            else this.activities = null;
          });
        this.$router.push("/search?q=" + this.searchTerm + Date.now());
      }
    },
    // 显示全部活动
    async showAllActivities() {
      await axios.get("/activities").then((res) => {
        if (res.data.activities.length > 0)
          this.activities = res.data.activities;
        else this.activities = null;
      });
      this.$router.push("/search?q=" + Date.now());
    },
    // 显示某类活动
    async showActivities(act_type) {
      await axios
        .post("/activities/showclass", { typ_e: act_type })
        .then((res) => {
          if (res.data.activities.length > 0)
            this.activities = res.data.activities;
          else this.activities = null;
        });
      this.$router.push("/search?q=" + act_type + Date.now());
    },
    // 显示其他活动
    async showOtherActivities() {
      await axios.post("/activities/showclass_other").then((res) => {
        if (res.data.activities.length > 0)
          this.activities = res.data.activities;
        else this.activities = null;
      });
      this.$router.push("/search?stamp=" + Date.now());
    },
    // 显示最火的活动
    async showPopularActivities() {
      await axios.post("/activities/recommendation").then((res) => {
        if (res.data.activities.length > 0)
          this.activities = res.data.activities;
        else this.activities = null;
      });
      this.$router.push("/search?stamp=" + Date.now());
    },
    // 与我相关的活动
    async myActivities() {
      await axios
        .get("/users/" + this.user.username + "/activities")
        .then((res) => {
          if (res.data.activities.length > 0)
            this.activities = res.data.activities;
          else this.activities = null;
        });
      this.$router.push("/search?stamp=" + Date.now());
    },
  },
};
</script>

<style scoped>
#app {
  width: 100%;
  height: 100%;
  background-image: url("./assets/images/bg.png");
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}
#url-home {
  color: grey;
  font-weight: 700;
  line-height: 100%;
  text-decoration: none;
  box-sizing: border-box;
}
</style>